<template>
	<view class="mine">
		<!-- 导航栏 -->
	 
		<view class="tui-header-bg">
			<!-- <image :src="ossUrl+'2025/02/11/8aee02beaf684bf796bc7dce1376c9f9.jpg'" class="tui-header-img"></image> -->
			<view class="haderImg">
				<image class="img" v-if="!userInfo.avatar"
					src="https://dn-coding-net-production-pp.codehub.cn/270e73de-2548-406b-9e1c-c0c8481dff90.png">
				</image>
				<image class="img" v-else :src="ossUrl + userInfo.avatar"></image>
			</view>
			<view class="textRt" style="display: flex;flex-direction: column;">
				<view class="nickname" @tap="getEditInfo">
					{{token ? userInfo&&userInfo.nickname :'请登录'}}
					<image  src="/static/user/my/icon_edit@2x.png" class="nickname-edit"></image>
				</view>
				<!-- <view class="qianming">{{userInfo&&userInfo.intro}}</view> -->
				<view class="qianming">{{userInfo.intro||''}}</view>
			</view>
		</view>
		 
		<view class="mine-content" :style="{ marginTop: '100rpx'  }">
			<view class="nickname" >
				 
			</view>
			<view class="qianming"> </view>
			<!-- <view class="info-item">
				<view class="item">
					<view class="number">{{userInfo&&userInfo.followNumber}}</view>
					<view class="title">关注</view>
				</view>
				<view class="item">
					<view class="number">{{userInfo&&userInfo.fansNumber}}</view>
					<view class="title">粉丝</view>
				</view>
				<view class="item">
					<view class="number">{{userInfo&&userInfo.likeNumber}}</view>
					<view class="title">获赞</view>
				</view>
				<view class="item">
					<view class="number">{{userInfo&&userInfo.collectNumber}}</view>
					<view class="title">收藏</view>
				</view>
			</view> -->
			<view class="order-section"> 
				<!-- <view class="order-header">
					<text class="title">我的订单</text>
				</view> -->
				<view class="order-nav">
					<view class="nav-item" v-for="(item, index) in orderNavList" :key="index" @click="navigateToOrder(item.status)">
						<view class="icon-wrapper">
							<image class="icon" :src="item.icon" mode="aspectFit"></image>
							<text class="badge" v-if="item.badge">{{item.badge}}</text>
						</view>
						<text class="label">{{item.label}}</text>
					</view>
				</view>
				<!-- <view class="mine-card order">
					<view class="text" @click="toOrderList">
						<tui-text text="订单管理" size="36" fontWeight="600" padding="0 0 20rpx 0"></tui-text>
						<tui-text text="一键查看订单" color="#999" size="24"></tui-text>
					</view>
					<image src="../../static/user/my/icon_dingdan@2x.png"></image>
				</view>
				<view class="mine-card dongtai" @click="toMineDynamic">
					<view class="text">
						<tui-text text="我的动态" size="36" fontWeight="600" padding="0 0 20rpx 0"></tui-text>
						<tui-text text="快来看看吧~" color="#999" size="24"></tui-text>
					</view>
					<image src="../../static/user/my/icon_dongtai@2x.png"></image>
				</view> -->
			</view>
			<!-- 活动banner -->
			<view class="activity-banner">
				<swiper 
					class="swiper" 
					:indicator-dots="false"
					:autoplay="true"
					:interval="3000"
					:duration="500"
					:circular="true"
					@change="swiperChange"
				>
					<swiper-item v-for="(item, index) in bannerList" :key="index">
						<image :src="item.image" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<view class="custom-indicator">
						<view 
							class="indicator-dot" 
							v-for="(item, index) in bannerList" 
							:key="index"
							:class="{ active: currentSwiper === index }"
						></view>
					</view>
			</view>
		 

			<tui-list-view radius="30" marginTop="40rpx" class="mine-bottom">
				<tui-list-cell @click="tapInvitation"  :arrow="true">
					<view class="tui-item-box">
						<image src="../../static/user/my/icon_yaoqing@2x.png"></image>
						<text class="tui-list-cell_name">邀请有奖</text>
					</view>
				</tui-list-cell>
				<tui-list-cell :arrow="true" @click="tapCollaborate">
					<view class="tui-item-box">
						<image src="../../static/user/my/icon_jiameng@2x.png"></image>
						<text class="tui-list-cell_name">加盟合作</text>
					</view>
				</tui-list-cell>
				<tui-list-cell :arrow="true" @tap="tapKF">
					<view class="tui-item-box">
						<image src="../../static/user/my/icon_kefu@2x.png"></image>
						<view class="tui-list-cell_name">平台客服</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :arrow="true" @tap="tapfk">
					<view class="tui-item-box">
						<image src="/static/user/my/icon_yjfk@3x.png"></image>
						<view class="tui-list-cell_name">意见反馈</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :arrow="true"  @tap="aboutPlatform(5)">
					<view class="tui-item-box">
						<image src="../../static/user/my/icon_guanyu@2x.png"></image>
						<text class="tui-list-cell_name">关于平台</text>
					</view>
				</tui-list-cell>
			</tui-list-view>
			<tui-form-button style="z-index: 1;" v-if="token" @click="tapOutLogin" margin="30rpx 0 200rpx 0"  radius="58rpx" size="32" color="#fff"   height="96rpx" background="#2FD7D3">退出登录</tui-form-button>
		</view>
		<tui-tabbar @clickTabbar="clickTabbar"></tui-tabbar>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import { getOrderMark } from "@/http/api/order/order.js"
	import Cache from "@/utils/cache";
	export default {
		data() {
			return {
				ossUrl: getApp().globalData.ossurl,// 图片前缀
				// 导航栏
				top: 0, // 导航栏距顶部的距离
				height: 0, // 导航栏高度
				currentSwiper: 0,
				orderInfo:{},
				token:Cache.get('access_token'),
				slideCount: 3,
				bannerList: [
					{
						image: '/static/a.png'
					},
					{
						image: '/static/a.png'
					},
					{
						image: '/static/a.png'
					}
				],
				orderNavList: [
					{
						label: '邀约中',
						icon: '/static/home/dqr.svg',
						status: 1
					},
					{
						label: '已确认',
						icon: '/static/home/fuk.svg',
						status: 2, 
					},
					{
						label: '服务中',
						icon: '/static/home/fw.svg',
						status: 4
					},
					{
						label: '待评价',
						icon: '/static/home/pj.svg',
						status: 5
					},
					{
						label: '已完成',
						icon: '/static/home/wc.svg',
						status: 6
					}
				]
			}
		},
		computed: {
			...mapState({
				isMerchant: state => state.isMerchant,
				isAssistant: state => state.isAssistant,
				userInfo: state => state.userInfo
			}),
		},
		onShow() {
			this.changeTabItem('index')
			this.setTabBarIndex({
				index: 3
			})
			uni.hideLoading();
			if(Cache.get('access_token')){
				this.getOrderMarkNum()
			} 
		},
		onLoad() { 
			this.$store.dispatch('getCategorys');
		},
		methods: {
			...mapMutations(['changeTabItem', 'setTabBarIndex', 'changeTabBar']),
			clickTabbar(detils) {
				this.changeTabBar(detils)
			},
			tapKF(){
				uni.makePhoneCall({
					phoneNumber: '111111', // 替换为实际要拨打的电话号码
					success(res) {
						console.log('拨打电话成功', res);
					},
					fail(err) {
						console.error('拨打电话失败', err);
					}
				});
			},
			tapfk(){
				uni.navigateTo({
					url:'/pages/mine/modules/feedback/feedback'
				})
			},
			getOrderMarkNum(){
				getOrderMark().then(res=>{
					if(res.code==200){
						let data=res.data
						let list=JSON.parse(JSON.stringify(this.orderNavList))
						list.forEach(element => {
							if(element.label==='已确认'){
								element.badge=data.confirmed
							}else if(element.label==='邀约中'){
								element.badge=data.callFor
							}else if(element.label==='服务中'){
								element.badge=data.inService
							}else if(element.label==='待评价'){
								element.badge=data.stayEvaluate
							}
						});
						this.orderNavList=list
					}
				})
			},
			aboutPlatform(type){
				uni.navigateTo({
					url:'/pages/mine/modules/richText/richText?type='+type
				})
			}, 
			//编辑用户信息
			getEditInfo(){
				if (!Cache.get('access_token')) {
					uni.showModal({
						title: '暂未登录',
						content: '请登录',
						confirmText: '前往登录',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/mine/modules/userLogin/userLogin'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					}) 
				}else{
					uni.navigateTo({
						url:'/pages/mine/modules/myEditInfo/myEditInfo'
					})
				}
			}, 
				 
			// },
			//邀请有奖
			tapInvitation(){
				if (!Cache.get('access_token')) {
					uni.showModal({
						title: '暂未登录',
						content: '请登录',
						confirmText: '前往登录',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/mine/modules/userLogin/userLogin'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					}) 
				}else{
					uni.navigateTo({
						url: '/pages/mine/modules/distributionDetails/distributionDetails'
					}) 
				}
			},
			//加盟合作
			tapCollaborate(){ 
				if (!Cache.get('access_token')) {
					uni.showModal({
						title: '暂未登录',
						content: '请登录',
						confirmText: '前往登录',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/mine/modules/userLogin/userLogin'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					}) 
				}else{
					uni.navigateTo({
						url: '/pages/mine/modules/leagueWork/leagueWork'
					}) 
				}
			},
			// 导航栏
			initNavigation(e) {
				this.top = e.top;
				this.height = e.height
			},

			//进入订单管理界面
			toOrderList() {
				if (!Cache.get('access_token')) {
					uni.showModal({
						title: '暂未登录',
						content: '请登录',
						confirmText: '前往登录',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/mine/modules/userLogin/userLogin'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					}) 
				}else{
					uni.navigateTo({
						url: '/pages/mine/modules/orderList/orderList'
					})
				}
				 
			},
			//退出登录
			tapOutLogin(){
				uni.clearStorageSync()
				uni.reLaunch({
					url: '/pages/mine/modules/userLogin/userLogin'
				})
			},

			// 进入我的动态界面
			toMineDynamic() { 
				if (!Cache.get('access_token')) {
					uni.showModal({
						title: '暂未登录',
						content: '请登录',
						confirmText: '前往登录',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/mine/modules/userLogin/userLogin'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					}) 
				}else{
					uni.navigateTo({
						url: '/pages/mine/modules/mineDynamic/mineDynamic'
					})
				} 
			},
			swiperChange(e) {
				this.currentSwiper = e.detail.current;
			},
			navigateToOrder(status) {
				if (!Cache.get('access_token')) {
					uni.showModal({
						title: '暂未登录',
						content: '请登录',
						confirmText: '前往登录',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/mine/modules/userLogin/userLogin'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					}) 
				}else{
					uni.navigateTo({
						url: `/pages/mine/modules/orderList/orderList?status=${status}`
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped> 
 /* 用户信息 */
 .nickname {
		font-size: 36rpx;
		font-weight: 600;
		margin: 30rpx 0;
	}

	.nickname-edit {
		width: 40rpx;
		height: 40rpx;
		vertical-align: bottom;
	}

	.qianming { 
		width: 60vw;
		font-size: 24rpx;
		color: #666;
		line-height: 40rpx;
		letter-spacing: 1px;
		height: 88rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	page { 
		background-color: #f5f5f5 !important;

		.mine {
			position: relative;
			display: flex; 
			justify-content: center;

			/* 导航栏 */
			.tui-header-bg {
				display: flex;
				width: 100%;
				height: 650rpx;
				margin: 0;
				z-index: 1;

				.tui-header-img {
					width: 100%;
					height: 100%;
					display: block;
				}

				// 头像
				.haderImg {
					height: 171rpx;
					width: 171rpx;
					overflow: hidden;
					border-radius: 50%;
					position: absolute;
					top: 30rpx;
					left: 21px;

					.img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				.textRt{
					position: absolute;
					top: 30rpx;
					left: 260rpx;
				}
			}

			.mine-content {
				position: absolute;
				top: 0;
				width: 90%;
				z-index: 9999;

				 

				.info-item {
					display: flex;
					justify-content: space-between;
					margin: 20rpx 20rpx 56rpx 20rpx;

					.item {
						display: flex;
						align-items: center;
						flex-direction: column;

						.number {
							font-size: 48rpx;
							font-weight: 600;
							margin-bottom: 17rpx;
						}

						.title {
							font-size: 28rpx;
							color: #666;
							letter-spacing: 1px;
						}
					}
				}

				.mine-middle {
					background: #FFFFFF;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					.title{
						font-weight: 500;
						font-size: 32rpx;
						color: #000000;
						line-height: 40rpx;
						text-align: left;
					}
				}

				.mine-bottom {
					.tui-item-box {
						width: 100%;
						display: flex;
						align-items: center;

						image {
							width: 48rpx;
							height: 48rpx;
						}

						.tui-list-cell_name {
							padding-left: 20rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 28rpx;
						}
					}
				}

			}

			.activity-banner {
				width: 670rpx;
				height: 160rpx;
				margin: 20rpx auto;
				position: relative;

				.swiper {
					width: 100%;
					height: 100%;
					border-radius: 24rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
						border-radius: 24rpx;
					}
				}

				.custom-indicator {
					position: absolute;
					bottom: 10rpx;
					left: 50%;
					transform: translateX(-50%);
					display: flex;
					align-items: center;
					z-index: 10;

					.indicator-dot {
						width: 12rpx;
						height: 12rpx;
						border-radius: 50%;
						background: rgba(255, 255, 255, 0.5);
						margin: 0 6rpx;
						transition: all 0.3s;

						&.active {
							width: 24rpx;
							border-radius: 6rpx;
							background: #FFFFFF;
						}
					}
				}
			}

			.order-section {
				// background: #fff;
				border-radius: 12rpx; 
				margin-top: 20rpx;
				padding: 20rpx;

				.order-header {
					padding: 20rpx 0;
					border-bottom: 1px solid #f5f5f5;

					.title {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
					}
				}

				.order-nav {
					display: flex;
					justify-content: space-between;
					padding: 30rpx 20rpx;

					.nav-item {
						display: flex;
						flex-direction: column;
						align-items: center;

						.icon-wrapper {
							position: relative;
							margin-bottom: 10rpx;

							.icon {
								width: 44rpx;
								height: 44rpx;
							}

							.badge {
								position: absolute;
								top: -10rpx;
								right: -16rpx;
								background: #FF6B6B;
								color: #fff;
								font-size: 20rpx;
								padding: 2rpx 8rpx;
								border-radius: 20rpx;
								min-width: 28rpx;
								text-align: center;
							}
						}

						.label {
							font-size: 24rpx;
							color: #333;
						}
					}
				}
			}
		}
	}
</style>